<template>
  <div class="patientList-container">
    <div class="patientList-title-container">
      <div class="title"><p class="title-con">今日就诊</p></div>
      <div class="btn">
        <el-button
          class="border-btn refresh-btn"
          plain
          size="small"
          @click="refreshList"
          >更新列表</el-button
        >
        <el-button
          class="main-btn"
          plain
          size="small"
          type="primary"
          @click="quickSeeDoctor"
          >快速就诊</el-button
        >
      </div>
    </div>
    <!-- 暂时不要此功能 -->
    <div class="patientList-search-container" v-if="false">
      <el-input
        class="search-input"
        v-model="searchValue"
        placeholder="患者姓名"
        @keyup.native="searchList"
      ></el-input>
    </div>
    <div class="patientList-list-container">
      <template v-if="patientListData.length">
        <el-table
          ref="singleTable"
          height="100%"
          :data="patientListData"
          @row-click="listHandler"
          :show-overflow-tooltip="true"
          :highlight-current-row="isHighLight"
          :row-key="getRowKeys"
          @current-change="toggleRowExpansion"
          width="320px"
        >
          <el-table-column
            prop="gender"
            label="性别"
            align="center"
            width="50px"
          >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <div class="item-info">
                  <span class="item-info-title">姓名：</span>
                  <p class="item-info-value">
                    <span>{{ scope.row.real_name }}</span>
                  </p>
                </div>
                <div class="item-info">
                  <span class="item-info-title">性别：</span>
                  <p class="item-info-value">
                    <span>{{ scope.row.gender == "0" ? "男" : "女" }}</span>
                  </p>
                </div>
                <div class="item-info">
                  <span class="item-info-title">年龄：</span>
                  <p class="item-info-value">
                    <span v-if="scope.row.age[0] > 0"
                      >{{ scope.row.age[0] }}岁</span
                    >
                    <span v-if="scope.row.age[1] > 0"
                      >{{ scope.row.age[1] }}月</span
                    >
                    <span v-if="scope.row.age[2] > 0"
                      >{{ scope.row.age[2] }}天</span
                    >
                  </p>
                </div>
                <div class="item-info" v-if="scope.row.mobile">
                  <span class="item-info-title">电话：</span>
                  <p class="item-info-value">
                    <span>{{ scope.row.mobile }}</span>
                  </p>
                </div>
                <div class="item-info" v-if="scope.row.contact">
                  <span class="item-info-title">紧急联系方式：</span>
                  <p class="item-info-value">
                    <span>{{ scope.row.contact }}</span>
                  </p>
                </div>
                <div class="item-info" v-if="scope.row.id_card">
                  <span class="item-info-title">身份证号：</span>
                  <p class="item-info-value">
                    <span>{{ scope.row.id_card }}</span>
                  </p>
                </div>
                <div slot="reference" class="name-wrapper">
                  <div class="sex-name">
                    <sex-icon :sex="scope.row.gender"></sex-icon>
                  </div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="real_name"
            align="center"
            label="姓名"
            width="120px"
          >
            <template slot-scope="scope">
              <div class="sex-name">
                <p class="content text-line-1">{{ scope.row.real_name }}</p>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="age" label="年龄"  align="center">
            <template slot-scope="scope">
              <div class="age">
                <p class="content">
                  <span v-if="scope.row.age[0] > 0">{{ scope.row.age[0] }}岁</span>
                  <span v-if="scope.row.age[1] > 0">{{ scope.row.age[1] }}月</span>
                  <span v-if="scope.row.age[2] > 0">{{ scope.row.age[2] }}天</span>
                </p>
              </div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="created_at"
            label="时间"
            align="center"
            width="70px"
          >
            <template slot-scope="scope">
              <div class="time">
                <p class="content">
                  <span>{{
                    scope.row.created_at | dateFormat("HH:MM:SS")
                  }}</span>
                </p>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="age" label="序号" align="center" width="70px">
            <template slot-scope="scope">
              <div class="list-num">
                <p class="content">{{ scope.row.no }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="register_status"
            label="状态"
            align="center"
            width="70px"
          >
            <template slot-scope="scope">
              <div class="status">
                <p class="content">
                  <span class="clinical" v-if="scope.row.register_status == 1"
                    >待诊</span
                  ><span
                    class="have-clinical checking"
                    v-if="scope.row.register_status == 2"
                    >接诊中</span
                  >
                  <span
                    class="have-clinical"
                    v-if="scope.row.register_status == 3"
                    >已诊</span
                  >
                  <span
                    class="have-clinical passed-num"
                    v-if="scope.row.register_status == 4"
                    >过号</span
                  >
                  <span
                    class="have-clinical passed-time"
                    v-if="scope.row.register_status == 5"
                    >过期</span
                  >
                  <span
                    class="have-clinical return"
                    v-if="scope.row.register_status == 6"
                    >已退号</span
                  >
                </p>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="data-null" v-else>
        <blank picWidth="120px"></blank>
      </div>
    </div>
  </div>
</template>
<script>
import sexIcon from "@/components/sexIcon.vue";
import { patientList } from "@/api/outpatient.js";
export default {
  components: {
    sexIcon,
  },
  data() {
    return {
      itemId: 0,
      patientListData: [],
      filterList: [],
      searchValue: "",
      isAutoRefresh: true,
      isHighLight: true,
      currentRow: null,
      getRowKeys(row) {
        return row.id;
      },
    };
  },
  computed: {
    isNewOutpatien() {
      console.log(this.$store.getters.isNewOutpatien);
      return this.$store.getters.isNewOutpatien;
    },
  },
  watch: {
    isNewOutpatien: {
      handler(newval, oldval) {
        if (newval == true) {
          // 更新列表
          this.refreshList(this.updataVuex);
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    if (this.$route.query.registerid) {
      this.itemId = this.$route.query.registerid;
    }
    this.getPatientList();
  },
  mounted() {},
  methods: {
    refreshList() {
      this.getPatientList(this.updataVuex);
      this.$message({
        type: "success",
        message: "已更新到最新",
        duration: 1000,
      });
    },
    // 更改vuex的状态
    updataVuex() {
      this.$store.dispatch("message/setIsNewOutpatienting", false);
    },
    toggleRowExpansion(row) {
      this.currentRow = row;
      this.itemId = row.id;
    },
    quickSeeDoctor() {
      this.$router.push({
        name: "outpatient",
      });
      this.isHighLight = false;
      this.$emit("quick-seeDoctor");
    },
    listHandler(row, column, event) {
      console.log(row, column, event);
      this.isHighLight = true;
      this.itemId = row.id;
      this.$router.push({
        name: "outpatient",
        query: {
          registerid: this.itemId,
        },
      });
      this.$emit("list-click", row);
    },
    // 本地根据名字筛选列表---开始
    searchList(val) {
      this.querySearch(this.searchValue);
    },
    querySearch(value) {
      var list = this.patientListData;
      var results = value ? list.filter(this.createFilter(value)) : list;
      this.filterList = results;
    },
    createFilter(value) {
      return (restaurant) => {
        return (
          restaurant.real_name.toLowerCase().indexOf(value.toLowerCase()) === 0
        );
      };
    },
    refreshData() {
      this.getPatientList();
    },
    setCurrentRow(currentRow){
      this.$nextTick(() => {
        this.$refs.singleTable.setCurrentRow(currentRow);
      });
    },
    // 本地根据名字筛选列表---结束
    getPatientList(cb) {
      patientList().then((res) => {
        if (res.code == 200) {
          let datas = res.data || [];
          datas.forEach((itm, idx) => {
            if (itm.age) {
              itm.age = itm.age.split(",");
            } else {
              itm.age = [0, 0, 0];
            }
            if (itm.no) {
              let len = itm.no.length;
              itm.no = itm.no.slice(len - 3, len);
            }
          });
          this.patientListData = datas || [];

          // 列表更新成功，初始化vuex
          if (cb) {
            cb();
          }

          this.currentRow = this.patientListData.filter(
            (p) => p.id == this.itemId
          )[0];
          this.setCurrentRow(this.currentRow)
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/outpatient/modules/patientList.scss";
</style>
